<template>
    <div>
        <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a :class="['mui-control-item',item.id==0 ? 'mui-active' : '']" v-for="item in cates" :key='item.id' @tap='getPhotoListByCateId(item.id)'>
							{{ item.title }}
						</a>
					</div>
				</div>
            </div> 
		<ul class='photo-list'>
			<router-link v-for='item in list' :key='item.id' tag="li" :to="'/home/photoinfo/'+item.id">
				<img v-lazy='item.img_url'>
				<div class="info">
					<h1 class="info-title">
						{{ item.title }}
					</h1>
					<div class="info-abstract">
						{{ item.abstract }}
					</div>
				</div>
			</router-link>
		</ul>
	
	</div>

</template>

<script>
//导航栏需要用到滚动效果，所以需要导入js文件，由于此文件中使用到了严格模式中禁用的方法，
// 所以若是想要继续使用，则需要将webpack中的严格模式关闭
import mui from '../../lib/mui/js/mui.min.js'
//此处设置滑到效果




export default {
	data() {
		return {
			cates:[
				{ title:'全部',id:0 },
				{ title:'家居生活',id:1 },
				{ title:'摄影器材',id:2 },
				{ title:'户外运动',id:3 },
				{ title:'限时抢购',id:4 },
				{ title:'天猫榜单',id:5 }
			],
			list:[
				{
					id:50,
					title:'这里是放标题的地方',
					img_url:require('../../images/photolist1.jpg'),
					abstract:'这个照片是我在网上随便找的，如果太难看也不要介意呀~'
				},
				{
					id:51,
					title:'这里是放标题的地方',
					img_url:require('../../images/photolist2.jpg'),
					abstract:'这个照片是我在网上随便找的，如果太难看也不要介意呀'
				},
				{
					id:52,
					title:'这里是放标题的地方',
					img_url:require('../../images/photolist3.jpg'),
					abstract:'这个照片是我在网上随便找的，如果太难看也不要介意呀'
				},
				{
					id:53,
					title:'这里是放标题的地方',
					img_url:require('../../images/photolist4.jpg'),
					abstract:'这个照片是我在网上随便找的，如果太难看也不要介意呀'
				},
				{
					id:54,
					title:'这里是放标题的地方',
					img_url:require('../../images/photolist5.jpg'),
					abstract:'这个照片是我在网上随便找的，如果太难看也不要介意呀'
				},
				{
					id:55,
					title:'这里是放标题的地方',
					img_url:require('../../images/photolist6.jpg'),
					abstract:'这个照片是我在网上随便找的，如果太难看也不要介意呀'
				},
				{
					id:56,
					title:'这里是放标题的地方',
					img_url:require('../../images/photolist7.jpg'),
					abstract:'这个照片是我在网上随便找的，如果太难看也不要介意呀'
				}
			]
		};
	},
	created(){
		// this.getAllcategory();
		// this.getPhotoListByCateId(0);//默认进入页面就请求所有图片
	},
	methods: {
		getAllcategory(){
			this.$http.get().then(result =>{
				if(result.body.status ===0) {
					result.body.message.unshift({ title:'全部',id:0 });
					this.cates = result.body.message;
				}
			})
		},
		getPhotoListByCateId(cateId){
			// this.$http.get(''+ cateId).then(result =>{
			// 	if(result.body.status === 0){
			// 		this.list = result.body.message;
			// 	}
			// })
		}
	},
	mounted() {
		//初始化组件的滑到功能，需要放到mounted里面进行
		mui('.mui-scroll-wrapper').scroll({
			deceleration:0.0005
		});
	}
    
}
</script>

<style lang="scss" scoped>
*{
	//启用单指垂直平移手势。可以与 pan-x 、pan-left 、pan-right 和／或 pinch-zoom 组合使用。
    touch-action:pan-y;//这样任何触摸事件都不会产生默认行为，但是 touch 事件照样触发，这样浏览器才不会一直报错
}

.photo-list{	
	list-style: none;
	padding:10px;
	margin: 0;
	
	li{
		position: relative;
		// padding: 0 10px;
		background-color: #ccc;
		text-align: center;
		margin-bottom:10px;
		box-shadow: 0 0 6px #666;

		img{
			width: 100%;
			vertical-align:middle;
		}

		img[lazy='loading']{
			width:40px;
			height:300px;
			margin:auto;
		}

		.info {
			text-align: left;
			position: absolute;
			bottom: 0;
			color:white;
			background-color: rgba(0,0,0,0.4);
			width:100%;
			.info-title{
				font-size : 13px;
			}

			.info-abstract{
				font-size : 10px;
			}
		}



	}
}



</style>

